<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>对话管理 - 客服工作台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body data-user-role="customer_service">
<!-- 引入增强版全局通知组件 -->
<div th:replace="~{common/enhanced-global-notification :: notification}"></div>

<!-- 使用专门的客服导航栏 -->
<div th:replace="~{common/customer-service-navbar :: navbar}"></div>

<div class="container mt-4">
    <div class="row">
        <div class="col-12">
            <h1 class="mb-4">
                <i class="bi bi-chat-dots text-info"></i> 对话管理
                <small class="text-muted">- 与顾客的对话记录</small>
            </h1>
        </div>
    </div>

    <!-- 错误信息 -->
    <div th:if="${error}" class="alert alert-danger" role="alert">
        <i class="bi bi-exclamation-triangle"></i> <span th:text="${error}">错误信息</span>
    </div>

    <!-- 对话列表 -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="bi bi-chat-left"></i> 活跃对话</h5>
                    <span class="badge bg-info" th:text="${#lists.size(customerList)}">0</span>
                </div>
                <div class="card-body">
                    <!-- 空状态 -->
                    <div th:if="${#lists.isEmpty(customerList)}" class="text-center text-muted py-5">
                        <i class="bi bi-chat-dots fs-1"></i>
                        <h4 class="mt-3">暂无对话记录</h4>
                        <p>当顾客发起咨询时，对话记录将在这里显示</p>
                        <a href="/customer-service/dashboard" class="btn btn-outline-primary">
                            <i class="bi bi-arrow-left"></i> 返回工作台
                        </a>
                    </div>
                    
                    <!-- 对话列表 -->
                    <div th:if="${!#lists.isEmpty(customerList)}">
                        <div th:each="conversation : ${customerList}" class="card mb-3 shadow-sm">
                            <div class="card-body">
                                <div class="d-flex align-items-start">
                                    <div class="flex-shrink-0 me-3">
                                        <div class="avatar-circle bg-primary text-white d-flex align-items-center justify-content-center" 
                                             style="width: 50px; height: 50px; border-radius: 50%;">
                                            <i class="bi bi-person"></i>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="d-flex justify-content-between align-items-start mb-2">
                                            <h6 class="mb-0" th:text="${conversation.customerName}">顾客姓名</h6>
                                            <small class="text-muted" th:text="${conversation.lastMessageTime}">时间</small>
                                        </div>
                                        <p class="text-muted mb-2" th:text="${conversation.lastMessage}">最新消息内容...</p>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <span class="badge bg-success">活跃</span>
                                                <span class="badge bg-info ms-1" th:text="${conversation.messageCount} + ' 条消息'">消息数</span>
                                            </div>
                                            <a th:href="@{/customer-service/chat/{conversationId}(conversationId=${conversation.conversationId})}" 
                                               class="btn btn-primary btn-sm">
                                                <i class="bi bi-chat-left-text"></i> 进入对话
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 返回按钮 -->
    <div class="row mt-4" th:if="${!#lists.isEmpty(customerList)}">
        <div class="col-12 text-center">
            <a href="/customer-service/dashboard" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> 返回工作台
            </a>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script th:inline="javascript">
    let currentConversationCount = /*[[${#lists.size(customerList)}]]*/ 0;
    let pollInterval;
    
    document.addEventListener('DOMContentLoaded', function() {
        // 开始轮询检查新对话
        startPolling();
        
        // 页面离开时停止轮询
        window.addEventListener('beforeunload', function() {
            stopPolling();
        });
    });
    
    function startPolling() {
        pollInterval = setInterval(function() {
            checkForNewConversations();
        }, 5000); // 每5秒检查一次
    }
    
    function stopPolling() {
        if (pollInterval) {
            clearInterval(pollInterval);
        }
    }
    
    function checkForNewConversations() {
        fetch('/customer-service/api/conversations-count')
            .then(response => response.json())
            .then(data => {
                if (data.success && data.count > currentConversationCount) {
                    // 有新对话，动态加载新对话列表
                    loadNewConversations();
                    currentConversationCount = data.count;
                }
            })
            .catch(error => {
                console.error('检查新对话失败:', error);
            });
    }
    
    function loadNewConversations() {
        fetch('/customer-service/api/conversations-list')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    updateConversationsList(data.conversations);
                    showNewConversationNotification();
                }
            })
            .catch(error => {
                console.error('加载新对话失败:', error);
            });
    }
    
    function updateConversationsList(conversations) {
        const container = document.querySelector('.card-body');
        if (!container) return;
        
        // 清空现有内容
        container.innerHTML = '';
        
        if (conversations.length === 0) {
            // 显示空状态
            container.innerHTML = `
                <div class="text-center text-muted py-5">
                    <i class="bi bi-chat-dots fs-1"></i>
                    <h4 class="mt-3">暂无对话记录</h4>
                    <p>当顾客发起咨询时，对话记录将在这里显示</p>
                    <a href="/customer-service/dashboard" class="btn btn-outline-primary">
                        <i class="bi bi-arrow-left"></i> 返回工作台
                    </a>
                </div>
            `;
        } else {
            // 显示对话列表
            conversations.forEach(conversation => {
                const conversationCard = document.createElement('div');
                conversationCard.className = 'card mb-3 shadow-sm';
                conversationCard.innerHTML = `
                    <div class="card-body">
                        <div class="d-flex align-items-start">
                            <div class="flex-shrink-0 me-3">
                                <div class="avatar-circle bg-primary text-white d-flex align-items-center justify-content-center" 
                                     style="width: 50px; height: 50px; border-radius: 50%;">
                                    <i class="bi bi-person"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <h6 class="mb-0">${conversation.customerName}</h6>
                                    <small class="text-muted">${conversation.lastMessageTime}</small>
                                </div>
                                <p class="text-muted mb-2">${conversation.lastMessage || '暂无消息'}</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <span class="badge bg-success">活跃</span>
                                        <span class="badge bg-info ms-1">${conversation.messageCount} 条消息</span>
                                    </div>
                                    <a href="/customer-service/chat/${conversation.conversationId}" 
                                       class="btn btn-primary btn-sm">
                                        <i class="bi bi-chat-left-text"></i> 进入对话
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                container.appendChild(conversationCard);
            });
        }
    }
    
    function showNewConversationNotification() {
        // 创建通知元素
        const notification = document.createElement('div');
        notification.className = 'alert alert-success alert-dismissible fade show position-fixed';
        notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
        notification.innerHTML = `
            <i class="bi bi-chat-dots"></i>
            <strong>新对话通知</strong>
            <p class="mb-0">有新的顾客发起了咨询！</p>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        document.body.appendChild(notification);
        
        // 3秒后自动移除通知
        setTimeout(() => {
            if (notification.parentNode) {
                notification.parentNode.removeChild(notification);
            }
        }, 3000);
    }
</script>
</body>
</html> 